<template>
  <div class="l-echart-vue"
  :style="styleSizeName"
  @click="handleClick">
    <component :is="id"
               v-if="reload"
               :dataChart="dataChart"
               :refs="getItemRefs()">
    </component>
  </div>
</template>

<script>
import Vue from 'vue';
import init from "../mixins/common";
export default {
  mixins:[init],
  data () {
    return {
      reload: false
    };
  },
  watch: {
    content () {
      this.initVue()
    }
  },
  computed: {
    content () {
      return this.option.f_Content;
    }
  },
  mounted () {
    this.initVue()
  },
  methods: {
    initVue () {
      this.reload = false
      let template = this.getSource("template");
      if (!template) return
      let script = this.getSource("script");
      if (script) {
        script = script.replace(/export default/, "return");
      }
      let styleCss = this.getSource("style");
      let styleId = 'style-' + this.id;
      if (document.getElementById(styleId)) {
        document.getElementById(styleId).remove()
      }
      let style = document.createElement("style");
      style.id = styleId
      style.innerHTML = styleCss;
      document.head.appendChild(style);
      let obj = new Function(script)() || {};
      obj.template = template;
      obj.props = {
        dataChart: Object,
        refs: Object,
      }
      Vue.component(this.id, obj)
      this.$nextTick(() => {
        this.reload = true
      })
    },
    getSource (type) {
      const reg = new RegExp(`<${type}[^>]*>`);
      let content = this.content || '';
      let matches = content.match(reg);
      if (matches) {
        let start = content.indexOf(matches[0]) + matches[0].length;
        let end = content.lastIndexOf(`</${type}`);
        return content.slice(start, end)
      }
    },
    handleClick (item) {
      this.clickFormatter && this.clickFormatter({
        data: item || this.dataChart
      }, this.getItemRefs());
    },
  }
};
</script>


